<template>
  <div class="v-attr-tip" >
    <div class="flex">
      <img :src="curTip.icon" alt="" >
      <div class="g-fs-14 g-bolder g-m-l-4">{{propertyGroupConfig ? propertyGroupConfig.name : curTip.title}}</div>
    </div>
    <div class="g-m-t-10 g-fs-12 g-m-l-5">
      {{propertyGroupConfig ? propertyGroupConfig.description : curTip.text}}
    </div>
  </div>
</template>
<script>
//// import bgImg from 'src/statics/images/draw/addtitlebg.png';
const iconFilePath = 'statics/icons/simulation/';
const tipConfig = {
  attribute: {
    title: "属性说明",
    icon: 'attribute.png',
    text: "在“基本属性”表中可编辑当前元素的属性，选择专家模式，以查看更多属性。当前元素的部件属性，可在左侧的栏目中切换。"
  },
  attrConstraint: {
    title: "约束",
    icon: 'attribute.png',
    text: "每个元素都可以和约束创建关系，这些和元素关联的约束，可以在元素的约束分组下查看，并可以应用已有的约束，及创建新的约束。"
  },
  propertyGroup: {
    title: "属性分组",
    icon: 'attribute.png',
    text: "在“基本属性”表中可编辑当前元素的属性，选择专家模式，以查看更多属性。当前元素的部件属性，可在左侧的栏目中切换。"
  },
  attrSlots: {
    title: "插槽",
    icon: 'attribute.png',
    text: "插槽可以用来设置实例的一个或多个结构特性的值。选择一个插槽，然后单击创建按钮，为它创建一个新值。"
  },
  radio: {
    title: "单选说明",
    icon: "radio.png",
    text: '在单项选择器下，仅可选择一个对象输入到对应的单元格中并覆盖原有内容，默认只展示符合当前元素类型的选项。'
  },
  checkbox: {
    title: "多选说明",
    icon: "checkbox.png",
    text: '在多项选择器下，一次能选取多个对象输入到对应的单元格中，默认只展示符合当前元素类型的选项。'
  },
  expression: {
    title: "表达式说明",
    icon: "unkonw",
    text: '描述表达式的内容，可以是普通文本，也可以输入代码'
  },
  editlink: {
    title: "编辑超链接",
    icon: "editlink.png",
    text: '在“基本属性”表中可编辑当前元素的属性，选择专家模式，以查看更多属性。当前元素的部件属性，可在左侧的栏目中切换。'
  },
  displayElement: {
    title: "显示关联元素",
    icon: "editlink.png",
    text: '在图表上显示相关联的模型元素，显示时要指定关系类型并选择元素的范围。'
  },
  itemflow: {
    title: "创建/编辑对象流",
    icon: "editlink.png",
    text: '通过指定传递的项和方向，创建新的或编辑现有对象流。'
  },
  relationType: {
    title: "关系类型",
    icon: "editlink.png",
    text: '选择并指定操作来表示关系图中元素之间的关系。如果指定了多个操作，关系映射将根据所有这些操作来表示关系.图例会根据关系的样式进行显示'
  },
  ElementType: {
    title: "显示或隐藏元素",
    icon: "editlink.png",
    text: '元素类型选择器可以选择需要显示的元素，通过拓展或泛化类型结构可以递归选择同结构类型元素。'
  },
  DisplayPartsAndPorts: {
    title: "显示部件和端口",
    icon: "welcomeicondk.png",
    text: '选择要在图表中显示的属性和端口。使用对话框左侧手动执行此操作，或使用对话框右侧的面板选择所有或特定类型的属性或端口。若要选择嵌套图元，请按住Shift键并选中该图元对应的复选框。完成后单击“确定”。'
  },
  License: {
    title: "激活",
    icon: 'welcomeiconjh.svg',
    text: '导入license文件，解锁九图建模、仿真、协同建模等功能。'
  }
};
Object.keys(tipConfig).forEach(key => {
  tipConfig[key].icon = iconFilePath + tipConfig[key].icon;
});
export default {
  name: 'comp-attr-tip',
  components: {
  },
  props: {
    type: {
      type: String,
      default: "attribute",
    },
    propertyGroupConfig: Object
  },
  data() {
    return {
      //// bgImg,
			
    };
  },
  computed: {
    curTip(){
      return tipConfig[this.type]; 
    }

  },
  methods: {
  }
};
</script>
<style lang="scss" scoped>
.v-attr-tip {
	background-image: url(~statics/images/draw/addtitlebg.png);
  padding-left: 19px;
  padding-top: 12px;
  height: 96px;
}
.flex{
  display: flex;
  align-items: center;
}

</style>